<template>
    <div class="card-box">
        <a class="card-img" :href="url">
            <img alt="图片">
        </a>
        
        <div class="card-title">{{ title }}</div>
        <div class="card-info">{{ info }}</div>
    </div>
</template>
<script setup>
    import { defineProps } from 'vue'
    const props = defineProps({
        title: String,
        info: String,
        url: String,
    })
</script>
<style scoped>
    .card-box {
        display: grid;
        grid-template-columns: 100px 100px;
        grid-template-rows: 40px 60px;
        grid-auto-flow: row;
    }
    .card-img {
        grid-row-start: 1;
        grid-row-end: 3;
    }
</style>